*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 500px;
  min-width: 500px;
}
.main {
  padding: 0 300px 0 200px;
}
.conter {
  height: 700px;
  background-color: yellow;
  float: left;
  width: 100%;
}
.left {
  height: 200px;
  background-color: plum;
  float: left;
  width: 200px;
  /* margin-left: calc(-100% - 200px); */
  margin-left: -100%;
  position: relative;
  right: 200px;
}
.right {
  height: 200px;
  background-color: pink;
  float: right;
  width: 300px;
  margin-left: calc(-100%);
  position: relative;
  left: 300px;
}